<template>
  <a-spin :spinning="isLoading">
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-form ref="formRef" :model="formState.state" :rules="formRules" :labelCol="{ span: 9 }">
          <a-col :span="24">
            <a-card>
              <footer-button :buttons="formState.buttons" />
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.Photo')" name="professorPicture">
                    <a-upload name="professorPicture" list-type="picture-card" class="avatar-uploader" accept=".jpg, .jpeg, .png"
                      :show-upload-list="false" action="#" :before-upload="beforeUpload">
                      <a-spin :spinning="state.uploadImgLoading">
                        <img width="100" v-if="formState.state.professorPicture" :src="formState.state.professorPicture"
                          alt="avatar" />
                        <div v-else>
                          <plus-outlined></plus-outlined>
                          <div class="ant-upload-text">{{t('professor-manage.label.Uploadphotos')}}</div>
                        </div>
                      </a-spin>
                    </a-upload>
                    <div class="upload-title">支持jpg、jpeg、png格式</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="教授编码" name="code">
                    <a-input v-model:value="formState.state.code" placeholder="自动生成" readonly :maxlength="50"/>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.name')" name="name">
                    <a-input v-model:value="formState.state.name" :placeholder="t('placeholder.pleaseEnter')" :maxlength="50"/>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.idNumber')" name="idCar">
                    <a-input v-model:value="formState.state.idCar" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" oninput="value=value.replace(/[^\w\.\/]/ig,'')"/>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.surname')" name="surname">
                    <a-input v-model:value="formState.state.surname" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.firstname')" name="firstName">
                    <a-input v-model:value="formState.state.firstName" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.middleinitial')" name="middleInitial">
                    <a-input v-model:value="formState.state.middleInitial" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.applicationDate')" name="applicationDate">
                    <a-date-picker style="width:100%" v-model:value="formState.state.applicationDate"
                      format="YYYY-MM-DD" value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.status')" name="status">
                    <a-select v-model:value="formState.state.status">
                      <a-select-option v-for="item in dictLists.data[dictEnum.ON_THE_JOB]" :key="item.id" :value="item.value">
                        {{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.hireDate')" name="hireDate">
                    <a-date-picker style="width:100%" v-model:value="formState.state.hireDate" format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.facultyGroup')" name="facultyGroup">
                    <a-input v-model:value="formState.state.facultyGroup" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.email')" name="emailAddress">
                    <a-input v-model:value="formState.state.emailAddress" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.altemail')" name="altEmail">
                    <a-input v-model:value="formState.state.altEmail" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.streetAddress')" name="streetAddress">
                    <a-input v-model:value="formState.state.streetAddress" :maxlength="100" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.addressLine2')" name="addressLine2">
                    <a-input v-model:value="formState.state.addressLine2" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.city')" name="city">
                    <a-input v-model:value="formState.state.city" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.stateProvince')" name="stateProvince">
                    <a-input v-model:value="formState.state.stateProvince" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.zipPostalCode')" name="zipPostalCode">
                    <a-input v-model:value="formState.state.zipPostalCode" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" oninput="value=value.replace(/[^\d]/g,'')"/>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.country')" name="country">
                    <a-input v-model:value="formState.state.country" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.citizenship')" name="citizenship">
                    <a-input v-model:value="formState.state.citizenship" :placeholder="t('placeholder.pleaseEnter')"/>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.phone')" name="phoneNumbe">
                    <a-input v-model:value="formState.state.phoneNumbe" :placeholder="t('placeholder.pleaseEnter')" oninput="value=value.replace(/[^\d]/g,'')"/>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.Receivingbank')">
                    <a-input v-model:value="formState.state.collectionBank" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.Receivingnumber')" name="collectionAccount">
                    <a-input v-model:value="formState.state.collectionAccount" :maxlength="50" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.school')" name="serviceSchoolName">
                    <a-input v-model:value="formState.state.serviceSchoolName" readonly :placeholder="t('placeholder.pleaseSelect')">
                      <template #addonAfter>
                        <div class="primary-color cursor-pointer" @click="openDialog('universityVisible')">
                          {{t('button.select')}}
                        </div>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item>{{t('professor-manage.label.intro')}}</a-form-item>
                  <a-form-item name="briefIntroduction">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.briefIntroduction"/>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card :title="t('professor-manage.title.workExperience')">
              <a-row>
                <a-col :span="13">
                  <!-- 授权在美国工作？ -->
                  <a-form-item>{{t('professor-manage.title.authorizedWorkYesno')}}</a-form-item>
                  <a-form-item name="authorizedWorkYesno">
                    <a-select v-model:value="formState.state.authorizedWorkYesno">
                      <a-select-option v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">
                        {{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="13">
                  <!-- 以前为莱恩教育工作过吗？ -->
                  <a-form-item>{{t('professor-manage.title.previouslyWorkYesno')}}</a-form-item>
                  <a-form-item name="previouslyWorkYesno">
                    <a-select v-model:value="formState.state.previouslyWorkYesno">
                      <a-select-option v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">
                        {{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 简要描述您在莱恩教育工作的时间和身份 -->
                  <a-form-item>{{t('professor-manage.title.capacityDesc')}}</a-form-item>
                  <a-form-item name="capacityDesc">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="formState.state.capacityDesc"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="13">
                  <!-- 开始供应日期 -->
                  <a-form-item>{{t('professor-manage.title.startingAvailabilityDate')}}</a-form-item>
                  <a-form-item name="startingAvailabilityDate">
                    <a-date-picker style="width:100%" v-model:value="formState.state.startingAvailabilityDate"
                      format="YYYY-MM-DD" value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="13">
                  <a-form-item>{{t('professor-manage.title.lastAvailabilityDate')}}</a-form-item>
                  <a-form-item name="lastAvailabilityDate">
                    <a-date-picker style="width:100%" v-model:value="formState.state.lastAvailabilityDate"
                      format="YYYY-MM-DD" value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 申请职位 -->
                  <a-form-item>{{t('professor-manage.title.applyingPosition')}}</a-form-item>
                  <a-form-item name="applyingPosition">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="formState.state.applyingPosition"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="13">
                  <!-- 你有教国际学生的经验吗？ -->
                  <a-form-item>{{t('professor-manage.title.teachingInternationalYesno')}}</a-form-item>
                  <a-form-item name="teachingInternationalYesno">
                    <a-select v-model:value="formState.state.teachingInternationalYesno">
                      <a-select-option v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">
                        {{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 简要描述你教国际学生的经历 -->
                  <a-form-item>{{t('professor-manage.title.gjDesc')}}</a-form-item>
                  <a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.teachingInternational" :maxlength="500" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="13">
                  <!-- 你有在中国教书的经验吗 -->
                  <a-form-item>{{t('professor-manage.title.chinaDesc')}}</a-form-item>
                  <a-form-item>
                    <a-select v-model:value="formState.state.acceleratedYesno">
                      <a-select-option v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">
                        {{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 简要描述你在中国的教学经验。 -->
                  <a-form-item>{{t('professor-manage.title.chinaExprienceDescribe')}}</a-form-item>
                  <a-form-item name="chinaExprienceDescribe">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.chinaExprienceDescribe" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="13">
                  <!-- 你有在其他国家教书的经验吗 -->
                  <a-form-item>{{t('professor-manage.title.otherforeignExperienceYesno')}}</a-form-item>
                  <a-form-item name="otherforeignExperienceYesno">
                    <a-select v-model:value="formState.state.otherforeignExperienceYesno">
                      <a-select-option v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">
                        {{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 如果你的答案与你教国际学生的经验相同，请注明。否则，请简要描述您在任何其他国家的教学经验。 -->
                  <a-form-item>{{t('professor-manage.title.otherforeignExperienceDesc')}}</a-form-item>
                  <a-form-item name="otherforeignExperienceDesc">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.otherforeignExperienceDesc" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="13">
                  <!-- 你是否有以速成形式教授课程的经验？ -->
                  <a-form-item>{{t('professor-manage.title.acceleratedYesno')}}</a-form-item>
                  <a-form-item name="acceleratedYesno">
                    <a-select v-model:value="formState.state.acceleratedYesno">
                      <a-select-option v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">
                        {{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 简要描述您在加速课程教学中的经验 -->
                  <a-form-item>{{t('professor-manage.title.acceleratedDesc')}}</a-form-item>
                  <a-form-item name="acceleratedDesc">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="formState.state.acceleratedDesc"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card :title="t('professor-manage.title.educationBackground')">
              <a-row>
                <a-col :span="24">
                  <!-- 最高教育水平 -->
                  <a-form-item>{{t('professor-manage.title.highestLevelEducation')}}</a-form-item>
                  <a-form-item name="highestLevelEducation">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.highestLevelEducation" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 最高学历证书名称 -->
                  <a-form-item>{{t('professor-manage.title.credentialHighest')}}</a-form-item>
                  <a-form-item name="credentialHighest">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.credentialHighest" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 最高教育水平的学科/领域： -->
                  <a-form-item>{{t('professor-manage.title.disiplineHighest')}}</a-form-item>
                  <a-form-item name="disiplineHighest">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="formState.state.disiplineHighest"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 第一个附加凭证的类型 -->
                  <a-form-item>{{t('professor-manage.title.additionalCredentialDesc')}}</a-form-item>
                  <a-form-item name="additionalCredentialDesc">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.additionalCredentialDesc" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 颁发第一个附加证书的机构 -->
                  <a-form-item>{{t('professor-manage.title.addirionalCredentialDesc')}}</a-form-item>
                  <a-form-item name="addirionalCredentialDesc">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.addirionalCredentialDesc" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 第一个附加凭证的标题 -->
                  <a-form-item>{{t('professor-manage.title.additionalCredentialTitle')}}</a-form-item>
                  <a-form-item name="additionalCredentialTitle">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.additionalCredentialTitle" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 第一个附加凭证的学科/领域 -->
                  <a-form-item>{{t('professor-manage.title.additionalCredentialDiscipline')}}</a-form-item>
                  <a-form-item name="additionalCredentialDiscipline">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.additionalCredentialDiscipline" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 第二个附加凭证的类型 -->
                  <a-form-item>{{t('professor-manage.title.secondAdditionalCredentialTypedesc')}}</a-form-item>
                  <a-form-item name="secondAdditionalCredentialTypedesc">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.secondAdditionalCredentialTypedesc" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 颁发第二个附加证书的机构 -->
                  <a-form-item>{{t('professor-manage.title.secondAdditionalCredentialDesc')}}</a-form-item>
                  <a-form-item name="secondAdditionalCredentialDesc">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.secondAdditionalCredentialDesc" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 第二个附加凭证的标题 -->
                  <a-form-item>{{t('professor-manage.title.econdAdditionalCredentialTitle')}}</a-form-item>
                  <a-form-item name="econdAdditionalCredentialTitle">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.econdAdditionalCredentialTitle" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <!-- 第二个附加凭证的学科/领域 -->
                <a-col :span="24">
                  <a-form-item>{{t('professor-manage.title.secondadditionalCredentialDiscipline')}}</a-form-item>
                  <a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.econdCredentialDiscipline"
                      :maxlength="500"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 授权Lion联系主管 -->
                  <a-form-item>{{t('professor-manage.title.authonrizedSupervisorsLion')}}</a-form-item>
                  <a-form-item name="authonrizedSupervisorsLion">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.authonrizedSupervisorsLion" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="24">
            <!-- 就业背景 -->
            <a-card :title="t('professor-manage.title.employmentBackground')">
              <a-form-item name="professorEmploymentBackgroud">
                <a-row v-for="(item,index) in formState.state.professorEmploymentBackgroud" :key="index">
                  <a-col :span="24">
                    <!-- 雇员 -->
                    <a-form-item>{{t('professor-manage.title.empoyer')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.empoyer"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 雇员地址 -->
                    <a-form-item>{{t('professor-manage.title.empoyerLocation')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.empoyerLocation"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 雇员电话号码 -->
                    <a-form-item>{{t('professor-manage.title.empoyerPhoneNumber')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.empoyerPhoneNumber"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 职位名称 -->
                    <a-form-item>{{t('professor-manage.title.jobTitle')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.jobTitle"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 工作职责和成就 -->
                    <a-form-item>{{t('professor-manage.title.jobResponsibilities')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.jobResponsibilities"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="13">
                    <!-- 开始受雇日期 -->
                    <a-form-item>{{t('professor-manage.title.startdateEmployment')}}</a-form-item>
                    <a-form-item>
                      <a-date-picker style="width:100%" v-model:value="item.startdateEmployment" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="13">
                    <!-- Currently employed by this employer -->
                    <a-form-item>{{t('professor-manage.title.currentlyEmployed')}}</a-form-item>
                    <a-form-item>
                      <a-select v-model:value="item.currentlyEmployed">
                        <a-select-option v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">
                          {{ item.label }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="13">
                    <!-- 终止受雇日期 -->
                    <a-form-item>{{t('professor-manage.title.enddateEmployment')}}</a-form-item>
                    <a-form-item>
                      <a-date-picker style="width:100%" v-model:value="item.enddateEmployment" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <!-- 主管姓名和职务 -->
                    <a-form-item>{{t('professor-manage.title.supervisorName')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.supervisorName"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 主管姓名-全名 -->
                    <a-form-item>{{t('professor-manage.title.supervisorFullname')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.supervisorFullname"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 主管名称参考-组织 -->
                    <a-form-item>{{t('professor-manage.title.supervisorOrganization')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.supervisorOrganization"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 主管姓名参考-与您的关系 -->
                    <a-form-item>{{t('professor-manage.title.supervisorOrganizationRelationship')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="item.supervisorOrganizationRelationship" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 主管姓名参考-电子邮件地址 -->
                    <a-form-item>{{t('professor-manage.title.supervisorAddress')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.supervisorAddress"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <!-- 主管姓名参考-电话号码（包括国际代码） -->
                    <a-form-item>{{t('professor-manage.title.supervisorPhone')}}</a-form-item>
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="item.supervisorPhone"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-col>
                  <a-col :span="24">
                    <a-form-item>
                      <a-button v-if="index === 0" type="primary" class="mt-20" @click="addCourseItem">{{t('button.add')}}</a-button>
                      <a-button v-else type="danger" class="mt-20" @click="deleteCourseItem(index)">{{t('button.delete')}}</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card :title="t('professor-manage.title.others')">
              <a-row>
                <a-col :span="24">
                  <!-- 非拉丁字母的名称（例如，对于中文名称，请在此处输入中文字符。） -->
                  <a-form-item>{{t('professor-manage.title.nonLationDesc')}}</a-form-item>
                  <a-form-item name="nonLationDesc">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="formState.state.nonLationDesc"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- 以前与Lion一起教授的课程 -->
                  <a-form-item>{{t('professor-manage.title.coursesPreviouslyLion')}}</a-form-item>
                  <a-form-item name="coursesPreviouslyLion">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }"
                      v-model:value="formState.state.coursesPreviouslyLion" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card :title="t('professor-manage.title.attachmentInformation')">
              <div class="up-file">
                <span class="label">{{t('professor-manage.title.attachment')}}</span>
                <a-upload name="file" :customRequest="handleUpload" @change="handleChange">
                  <a-button>{{t('button.upload')}}</a-button>
                </a-upload>
              </div>
            </a-card>
          </a-col>
        </a-form>
      </a-row>
      <BasicTableModal v-model:visible="modalConfig.show" v-if="modalConfig.show" :columns="modalConfig.commonColumns"
        :fetchAjax="modalConfig.api" :title="modalConfig.title" :searchForm="modalConfig.searchForm"
        @selectUniversity="value => selectItem(value, modalConfig.currentType)" />
    </page-layout>
  </a-spin>
</template>
<script>
export default {
  name: "professor-manage-add"
}
</script>
<script setup>
  import {
    professorSave,
    selectById,
    update
  } from "@/api/module/professor";
  import {
    onMounted,
    reactive,
    ref,
    onActivated
  } from "vue";
  import {
    useRoute,
    useRouter
  } from 'vue-router'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import dictEnum from '@/const/dict'
  import BasicTableModal from '@/component/basic-table-modal'
  import {
    message
  } from "ant-design-vue";
  import {
    upload
  } from "@/api/module/oss"
  import {
    page as schoolPage
  } from '@/api/module/school'
  import moment from "moment";
  import {
    useI18n
  } from "vue-i18n";
  import mixin from '@/mixins'
  import { bankNumberPattern, emailPattern } from '@/utils/validator.js'
  const {
    t
  } = useI18n();
  const { returnRoute } = mixin.setup()
  let isLoading = ref(false)
  const formRef = ref();
  const route = useRoute()
  const router = useRouter()
  const formState = reactive({
    buttons: [{
        name: 'save',
        event: () => onSubmit(),
        type: "primary",
        code: ''
      },
      {
        name: 'reset',
        event: () => resetForm(),
        code: ''
      }
    ],
    state: {
      //基础信息
      professorPicture: '',
      name: '',
      idCar: '',
      surname: '',
      firstName: '',
      middleInitial: '',
      applicationDate: '',
      status: '',
      hireDate: '',
      facultyGroup: '',
      emailAddress: '',
      altEmail: '',
      streetAddress: '',
      addressLine2: '',
      city: '',
      stateProvince: '',
      zipPostalCode: '',
      country: '',
      citizenship: '',
      phoneNumbe: '',
      briefIntroduction: '',
      serviceSchoolName: '',
      serviceSchool: '',
      // 工作经验
      authorizedWorkYesno: '',
      previouslyWorkYesno: '',
      capacityDesc: '',
      startingAvailabilityDate: '',
      lastAvailabilityDate: '',
      applyingPosition: '',
      teachingInternationalYesno: '',
      // otherforeignExperienceDesc:'',
      // acceleratedYesno:'',
      chinaExprienceDescribe: '',
      otherforeignExperienceYesno: '',
      otherforeignExperienceDesc: '',
      acceleratedYesno: '',
      acceleratedDesc: '',
      //教育背景
      highestLevelEducation: '',
      credentialHighest: '',
      disiplineHighest: '',
      additionalCredentialDesc: '',
      addirionalCredentialDesc: '',
      additionalCredentialTitle: '',
      additionalCredentialDiscipline: '',
      secondAdditionalCredentialTypedesc: '',
      secondAdditionalCredentialDesc: '',
      econdAdditionalCredentialTitle: '',
      authonrizedSupervisorsLion: '',
      //就业背景
      professorEmploymentBackgroud: [],
      //其他
      nonLationDesc: '',
      coursesPreviouslyLion: '',
      files: [],
      id: '',
    }
  });
  const saveKey = "save";
  const labelCol = {
    span: 6
  }
  const wrapperCol = {
    span: 18
  }
  let dictLists = reactive({
    data: {}
  })
  const formRules = {
    name: [{
      required: true,
      message: '请输入Name',
      trigger: 'blur'
    }],
    collectionAccount: [{
      required: false,
      validator: (rules, value) => {
        if (!value) return Promise.resolve();
        if (!bankNumberPattern.test(value)) {
          return Promise.reject('请输入正确收款账号')
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }],
    emailAddress: [{
      required: true,
      validator: (rules, value) => {
        if (!value) return Promise.reject('请输入电子邮箱');
        if (!emailPattern.test(value)) {
          return Promise.reject('请输入正确电子邮箱')
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }]
  };
  const addCourseItem = () => formState.state.professorEmploymentBackgroud.push({
    empoyer: '',
    empoyerLocation: '',
    empoyerPhoneNumber: '',
    jobTitle: '',
    jobResponsibilities: '',
    startdateEmployment: '',
    currentlyEmployed: '',
    enddateEmployment: '',
    supervisorName: '',
    supervisorFullname: '',
    supervisorOrganization: '',
    supervisorOrganizationRelationship: '',
    supervisorAddress: '',
    supervisorPhone: '',
    id: ''
  })
  const deleteCourseItem = sendIndex => formState.state.professorEmploymentBackgroud.splice(sendIndex, 1)
  const getDetails = () => {
    formRef.value.resetFields()
    if (route.query.id) {
      selectById({
        id: route.query.id
      }).then(res => {
        if (res.code === 200) {
          if (res.data.applicationDate != ''&& !isNaN(res.data.applicationDate)) {
            res.data.applicationDate = res.data.applicationDate ? moment(res.data.applicationDate).format(
              "YYYY-MM-DD") : "";
          }
          if (res.data.hireDate != '' && !isNaN(res.data.hireDate)) {
            res.data.hireDate = res.data.hireDate ? moment(res.data.hireDate).format("YYYY-MM-DD") : "";
          }
          if (res.data.startingAvailabilityDate != '' && !isNaN(res.data.startingAvailabilityDate)) {
            res.data.startingAvailabilityDate = res.data.startingAvailabilityDate ? moment(res.data
              .startingAvailabilityDate).format("YYYY-MM-DD") : "";
          }
          if (res.data.lastAvailabilityDate != '' && !isNaN(res.data.lastAvailabilityDate)) {
            res.data.lastAvailabilityDate = res.data.lastAvailabilityDate ? moment(res.data.lastAvailabilityDate)
              .format("YYYY-MM-DD") : "";
          }
          for (var i in res.data.professorEmploymentBackgroud) {
            if (res.data.professorEmploymentBackgroud[i].startdateEmployment != ''&&!isNaN(res.data.professorEmploymentBackgroud[i].startdateEmployment)) {
              res.data.professorEmploymentBackgroud[i].startdateEmployment = moment(res.data
                .professorEmploymentBackgroud[i].startdateEmployment).format('YYYY-MM-DD')
            }
            if (res.data.professorEmploymentBackgroud[i].enddateEmployment!=''&&!isNaN(res.data.professorEmploymentBackgroud[i].enddateEmployment)) {
              res.data.professorEmploymentBackgroud[i].enddateEmployment = moment(res.data
                .professorEmploymentBackgroud[i].enddateEmployment).format('YYYY-MM-DD')
            }
          }
          formState.state = reactive({
            ...formState.state,
            ...res.data
          })
          console.log(formState.state)
        }
        if (res.code === 500) return message.error(res.msg || '服务器错误')
      })
    } else {
      if (formState.state.professorEmploymentBackgroud.length == 0) {
        addCourseItem();
      }
    }
  }

  onActivated(() => {
    getDetails();
  });
  onMounted(async () => {
    dictLists.data = await getDictByCodesReturnObj([
      dictEnum.YES_OR_NO,
      dictEnum.ON_THE_JOB,
    ])
    modalConfig.universityColumns = [
      // {
      //   dataIndex: "schoolCnName",
      //   key: "schoolCnName",
      //   title: t('professor-manage.openDialog.schoolname'),
      // },
      {
        dataIndex: "schoolEnName",
        key: "schoolEnName",
        title: t('professor-manage.openDialog.schoolEnName'),
      },
      {
        dataIndex: "schFollowUpProgress",
        key: "schFollowUpProgress",
        title: t('professor-manage.openDialog.schFollowUpProgress'),
        cellRender: (record, data) => {
          if (dictLists.data[dictEnum.FOLLOW_PROGRESS]) {
            const item = dictLists.data[dictEnum.FOLLOW_PROGRESS].find(v => v.value == data)
            return item ? item.label : ''
          }
          return ''
        }
      },
    ]
  })

  const resetForm = () => {
    formRef.value.resetFields()
  }

  const onSubmit = () => {
    formRef.value.validate().then(() => {
      isLoading = true
      if (route.query.id) {
        updateItem(formState.state)
      } else {
        saveItem(formState.state)
      }
    })
  };

  const saveItem = (data) => {
    professorSave(data).then(res => {
      if (res.code === 200) {
        message.success(res.message)
        returnRoute()
      }
      if (res.code === 500) return message.error(res.msg || '新增失败，服务器错误')
      isLoading = false
    }).catch(() => isLoading = false)
  }

  const updateItem = (data) => {
    update(data).then(res => {
      if (res.code === 200) {
        message.success(res.message)
        returnRoute()
      }
      if (res.code === 500) return message.error(res.msg || '编辑失败，服务器错误')
      isLoading = false
    }).catch(() => isLoading = false)
  }
  const modalConfig = reactive({
    title: '',
    api: schoolPage,
    show: false,
    currentType: '',
    commonColumns: [],
    universityColumns: [],
    responsibleColumns: [],
    searchForm: [{
      label: t('professor-manage.openDialog.schoolname'),
      key: 'schoolCnName',
      type: 'input',
      placeholder: t('placeholder.pleaseEnter'),
    }, ],
  })
  const openDialog = (type) => {
    modalConfig.currentType = type
    modalConfig.show = true
    modalConfig.commonColumns = modalConfig.universityColumns
    modalConfig.api = schoolPage
    modalConfig.title = t('professor-manage.openDialog.selectschool')
  }

  const closeDialog = () => {
    modalConfig.show = false
  }
  const selectItem = (value, type) => {
    formState.state.serviceSchoolName = value.schoolEnName;
    formState.state.serviceSchool = value.id;
  }
  //上传文件
  const handleUpload = data => {
    const formData = new FormData()
    formData.append('file', data.file)
    upload(formData).then(res => {
      if (res.code === 500) {
        message.error({
          content: '上传附件失败'
        })
        data.onError()
      } else {
        data.onSuccess(res.data)
      }
    })
  }
  const handleChange = info => {
    const arr = info.fileList.filter(v => v.status !== 'error')
    if (arr && arr.length) {
      formState.state.files = arr.map(item => {
        return {
          url: item.response ? item.response.path || '' : '',
          type: 2
        }
      })
    }
  }
  // 图片上传
  const state = reactive({
    uploadImgLoading: false
  })
  const beforeUpload = file => {
    if (!state.uploadImgLoading) {
      const Files = new FormData()
      Files.append('file', file)
      state.uploadImgLoading = true
      upload(Files).then(res => {
        if (res.code === 500) {
          message.error({
            content: res.msg || '上传图片失败'
          })
        } else {
          const {
            path: url,
            id: fileId,
            remark,
            name
          } = res.data
          formState.state.professorPicture = url
        }
        state.uploadImgLoading = false
      }).catch(() => state.uploadImgLoading = false)
    }
    return false
  };
</script>
<style lang="less" scoped>
  .upload-title {
    font-size: 14px;
    color: #b7b7b7;
  }

  .avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
  }

  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
